<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>

    <style>
        
    </style>
</head>

<script>
    
    new Promise((resolve, reject)=>{
        setTimeout(()=>{
            console.log('执行任务1(异步)')
            resolve(1)
        }, 1000)
    })
    .then(
        value => {
            console.log(`接收到任务1(异步)的结果: ${value}`)
            // 串联执行任务2(同步)
            console.log('执行任务2(同步)')
            return Promise.resolve(2)
        }
    )
    .then(
        value => {
            console.log(`接收到任务2(同步)的结果: ${value}`)
            // 串联执行任务3(异步)
            return new Promise((resolve, reject)=>{
                setTimeout(()=>{
                    console.log('执行任务3(异步)')
                    reject(3)
                }, 1000)
            })
        }
    )
    .catch(
        reason => {
            console.log(`接收到任务3(异步)的结果: ${reason}`)
            // 串联执行任务4(同步)
            console.log('执行任务4(同步)')
            return 4    // 这样返回的也是一个Promise, 与Promise.resolve(4)效果一致
        }
    )
    .then(
        value => console.log(`接收到任务4(同步)的结果: ${value}`)
    ) 

    /* 
        执行任务1(异步)
        接收到任务1(异步)的结果: 1
        执行任务2(同步)
        接收到任务2(同步)的结果: 2
        执行任务3(异步)
        接收到任务3(异步)的结果: 3
        执行任务4(同步)
        接收到任务2(同步)的结果: 4
    */



</script>

<body>
    
</body>

</html>